<template>
    <div>
        <!-- 选择供货商弹窗 -->
        <el-dialog :title="title" :visible.sync="showChooseSupplier" :close-on-click-modal="false" 
            width="70%" @close="closeDialog" center append-to-body>
            <div class="goods_list">
                <div class="filter">
                    <el-form :model="queryParams" label-width="auto">
                        <el-row>
                            <el-col :span="7">
                                <el-form-item label="供货商名称:">
                                    <el-input style="width: 220px;" maxlength="100" v-model="queryParams.search" placeholder="请输入" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-button size="small" icon="el-icon-search" @click="handleQuery"
                                    style="margin: 8px 0 0 20px;" class="btn_primary_color">查询</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <el-table ref="customersTable" :data="supplierList" border @current-change="handleSelectionChange" 
                    style="margin-top: 15px;" row-key="id" highlight-current-row max-height="380">
                    <el-table-column label="名称" align="left" prop="name" />
                    <el-table-column label="简称" align="left" prop="abbr_name" />
                    <el-table-column label="分类" align="left" prop="cateName" />
                    <el-table-column label="联系人" align="left" prop="contact" />
                    <el-table-column label="联系电话" align="left" prop="phone" />
                    <el-table-column label="邮箱" align="left" prop="email" />
                    <el-table-column label="微信" align="left" prop="wechat" />
                    <el-table-column label="地址" align="left" prop="addr" />
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getSupplierList } from '@/api/cooperate';
export default {
    data() {
        return {
            queryParams: {
                search: ''
            },
            chooseSuppliers: [],
            middleSuppliers: [],
            supplierList: [],
            pageParam: {
                page: 1,
                num: 20
            },
            total: 0,
            totalPage: 0,
            corp: ''
        }
    },
    props: {
        showChooseSupplier: {
            type: Boolean
        },
        selectSuppliers: {
            type: Array,
            default: () => [] // 指定默认值为空数组
        },
        title: {
            type: String,
            default: '选择供货商'
        }
    },
    watch: {
        selectSuppliers: {
            handler(newVal) {
                // 当 selectSuppliers 变化时执行的操作
                console.log('selectSuppliers 已更新', newVal);
                this.middleSuppliers = newVal
                this.handleSelectRow()
            },
            deep: true // 深度监听数组变化
        }
    },
    created() {
        this.queryParams.corp = this.$store.state.corpId
        this.handleQuery()
    },
    methods: {
        // 多选框选中数据
        handleSelectionChange (selection) {
            this.chooseSuppliers = [selection]
            this.chooseGoodsOk()
        },
        // 按条件筛选
        handleQuery() {
            this.pageParam.page = 1
            this.supplierList = []
            this.getCustomerLists()
        },
        // 获取客户列表
        getCustomerLists() {
            let that = this
            let params = Object.assign({}, this.queryParams, this.pageParam)
            getSupplierList(params).then(res => {
                let list = res.data.data.supplier_list.filter(item => {
                    if (item.category_detail && item.category_detail.name) {
                        item.cateName = item.category_detail.name
                    }else{
                        item.cateName = ''
                    }
                    return item
                })
                that.supplierList = that.supplierList.concat(list)
                that.total = res.data.data.total
                
                if (that.total % that.pageParam.num === 0){  //整除
                    that.totalPage = Math.trunc(that.total / that.pageParam.num)
                }else{
                    that.totalPage = Math.trunc(that.total / that.pageParam.num) + 1
                }

                that.pageParam.page ++
                if (that.pageParam.page > that.totalPage){
                    // 勾选已选择行
                    that.handleSelectRow()
                    return
                }else{
                    that.getCustomerLists()
                }
            })
        },
        joinArray() {
            const map = new Map();
            this.supplierList.forEach(item => {
                map.set(item.id, { ...item });
            });

            this.selectSuppliers.forEach(item => {
                if (map.has(item.id)) {
                    const existingItem = map.get(item.id);
                    map.set(item.id, { ...existingItem, ...item });
                } else {
                    map.set(item.id, { ...item });
                }
            });
            this.supplierList = Array.from(map.values());
        },
        handleSelectRow() {
            let that = this
            this.$nextTick(() => {
                const table = that.$refs.customersTable;
                if (table && table.toggleRowSelection) {
                    table.clearSelection();
                    that.middleSuppliers.forEach(item => {
                        const rowToSelect = that.supplierList.find(order => order.id === item.id);
                        if (rowToSelect) {
                            table.setCurrentRow(rowToSelect);
                        }
                    })
                }
            })
        },
        closeDialog() {
            this.chooseSuppliers = []
            this.$emit('hidden')
        },
        chooseGoodsOk() {
            let res = this.chooseSuppliers
            this.middleSuppliers = res
            this.$emit('chooseOK', res)
            this.chooseSuppliers = []
        },
    }
}
</script>

<style scoped>
    .goods_list {
        padding: 0 10px;
        max-height: 400px;
        overflow-y: auto;
    }
    .btn_primary_color {
        background: #0099ff !important;
        color: #fff !important;
    }
</style>